<template>
  <div class="box">
    <!-- <div class="goHome" @click="goHome">返回主页</div> -->
    <div class="banner">
      <h1>商务信用报告</h1>
      <div class="scan">
        <el-input
          v-model="entname"
          placeholder="请输入企业名称/统一社会信用代码"
          clearable
          style="width: 4.1667rem"
        />
        <h4 @click="scan">查询</h4>
      </div>
    </div>
    <div class="f2">
      <div class="f2_content">
        <template v-if="status">
          <div class="title">报告内容</div>
          <div class="list">
            <div class="list_data">
              <div class="list_title">
                <p>基础版</p>
              </div>
              <div class="list_content">
                <div class="contentTop">
                  <data class="item1">
                    <img src="@/assets/report/热点概念.png" alt="" />
                    <p>6大信息维度</p>
                  </data>
                  <data class="item1">
                    <img src="@/assets/report/热点概念.png" alt="" />
                    <p>快速了解目标企业</p>
                  </data>
                </div>
                <div class="contentButtom">
                  <p class="modeltitle">信息模块</p>
                  <div class="infomodel">
                    <div class="model-item">
                      <img src="@/assets/report/big对勾.png" alt="" />
                      <p>信用评估</p>
                    </div>
                    <div class="model-item">
                      <img src="@/assets/report/big对勾.png" alt="" />
                      <p>基础信息</p>
                    </div>
                    <div class="model-item">
                      <img src="@/assets/report/big对勾.png" alt="" />
                      <p>关联信息</p>
                    </div>
                    <div class="model-item">
                      <img src="@/assets/report/big对勾.png" alt="" />
                      <p>涉诉信息</p>
                    </div>
                    <div class="model-item">
                      <img src="@/assets/report/big对勾.png" alt="" />
                      <p>经营信息</p>
                    </div>
                    <div class="model-item">
                      <img src="@/assets/report/big对勾.png" alt="" />
                      <p>经营风险</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="list_data">
              <div class="list_title">
                <p>标准版</p>
              </div>
              <div class="list_content">
                <div class="contentTop">
                  <data class="item1">
                    <img src="@/assets/report/热点概念.png" alt="" />
                    <p>7大信息维度</p>
                  </data>
                  <data class="item1">
                    <img src="@/assets/report/热点概念.png" alt="" />
                    <p>全面海关数据分析和信用评估</p>
                  </data>
                </div>
                <div class="contentButtom">
                  <p class="modeltitle">信息模块</p>
                  <div class="infomodel">
                    <div class="model-item">
                      <img src="@/assets/report/big对勾.png" alt="" />
                      <p>信用评估</p>
                    </div>
                    <div class="model-item">
                      <img src="@/assets/report/big对勾.png" alt="" />
                      <p>基础信息</p>
                    </div>
                    <div class="model-item">
                      <img src="@/assets/report/big对勾.png" alt="" />
                      <p>关联信息</p>
                    </div>
                    <div class="model-item">
                      <img src="@/assets/report/big对勾.png" alt="" />
                      <p>涉诉信息</p>
                    </div>
                    <div class="model-item">
                      <img src="@/assets/report/big对勾.png" alt="" />
                      <p>经营信息</p>
                    </div>
                    <div class="model-item">
                      <img src="@/assets/report/big对勾.png" alt="" />
                      <p>经营风险</p>
                    </div>
                    <div class="model-item">
                      <img src="@/assets/report/big对勾.png" alt="" />
                      <p>进出口贸易分析</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="list_data img2"></div>
            <div class="list_data img3"></div> -->
          </div>
          <div class="title">应用场景</div>
          <div class="useScene">
            <div class="useSceneLeft">
              <img src="@/assets/report/组104.png" alt="" />
            </div>
            <div class="useSceneRight">
              <div class="useSceneRightList" style="background: #f0faf4">
                <h4>贸易风控</h4>
                <p>
                  筛选贸易伙伴时，企业通过商务信用报告，可以更准确地评估贸易伙伴的信用状况并做出贸易决策。在贸易过程中，企业可以定期查看贸易伙伴的商务信用报告，了解其信用状况的变化。并及时采取风险管理措施。
                </p>
              </div>

              <div class="useSceneRightList" style="background: #fdf9f3">
                <h4>招商风控</h4>
                <p>
                  政府可以通过商务信用报告了解企业经营状况、财务状况和信誉度等信息，根据信用状况，调整审批流程优惠政策等，提高招商效率。
                </p>
              </div>
              <div class="useSceneRightList">
                <h4>金融风控</h4>
                <p>
                  通过商务信用报告，金融机构可以更准确地评估企业的信用风险，进行准入审批、额度管理、利率管理、客户分类，制定更有效的风险管理策略。
                </p>
              </div>
            </div>
          </div>
        </template>
        <!-- 查询结果 -->
        <template v-else>
          <div class="result" v-for="item in list" :key="item.credit_no">
            <div class="result_left">
              <div class="result_left_top">
                <h1>{{ item.name }}</h1>
                <h6>续存</h6>
              </div>
              <div class="result_left_bottom">
                <h4>统一社会信用代码：{{ item.credit_no }}</h4>
                <h4>法定代表人：{{ item.oper_name }}</h4>
                <h4>成立日期：{{ item.start_date }}</h4>
              </div>
            </div>
            <div class="result_right">
              <div class="btn" @click="getReport(item)">获取报告</div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { myPostFetch } from '@/api/report'
export default {
  data() {
    return {
      status: true,
      entname: '', //广东测试化有限公司
      list: null
    }
  },
  mounted() {
    document.documentElement.scrollTop = 0
  },
  methods: {
    goHome() {
      this.$router.push('/')
    },
    async scan() {
      if (this.entname == '') return
      let url = '/credit/mohu'
      let params = {
        keyword: this.entname
      }
      let data = await myPostFetch(url, params)
      console.log(data.data.items)
      if (data.code == 31001) return this.$Message.error('请输入正确的企业名称/统一社会信用代码')
      if (data.code == 0) {
        this.list = data.data.items
        this.status = false
      }
    },
    // 跳转获取报告页面
    getReport(item) {
      sessionStorage.setItem('credit_no', item.credit_no)
      sessionStorage.setItem('matchItems', item.name)
      this.$router.push('/getReport')
    }
  }
}
</script>
<style scoped lang="scss">
.box {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  // background-color: #f5f7fa;
  background: #f5f7fa;
  p {
    color: #181818;
  }
  .goHome {
    cursor: pointer;
    z-index: 9999;
    position: absolute;
    right: 0.4167rem;
    top: 0.2083rem;
    font-size: 0.0833rem;
    font-weight: 500;
    color: #ffffff;
    text-decoration: underline;
  }
  .banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 1.7188rem;
    background: url(@/assets/report/组24631.png);
    background-size: 100% 100%;
    h1 {
      font-size: 0.2083rem;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #ffffff;
      font-weight: 600;
    }
    .scan {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 0.2708rem;
      margin-top: 0.2917rem;
      h4 {
        cursor: pointer;
        align-items: center;
        justify-content: center;
        display: flex;
        width: 0.5208rem;
        height: 0.2708rem;
        background: #ff752c;
        border-radius: 0px 0.0208rem 0.0208rem 0px;
        color: #fff;
        font-size: 0.0938rem;
        font-weight: 400;
      }
    }
  }
  .f2 {
    width: 100%;
    .f2_content {
      box-sizing: border-box;
      padding-bottom: 0.4167rem;
      width: 6.25rem;
      margin: 0 auto;
      .title {
        font-size: 0.1563rem;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #181818;
        margin-top: 0.3906rem;
        margin-bottom: 0.2344rem;
      }
      // 应用场景
      .useScene {
        padding: 0.0521rem;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        width: 6.1458rem;
        height: 2.0833rem;
        .useSceneLeft {
          width: 1.776rem;
          height: 2.0833rem;
          img {
            height: 100%;
          }
        }
        .useSceneRight {
          width: 4.2448rem;
          height: 100%;
          .useSceneRightList {
            box-sizing: border-box;
            padding: 0.1042rem 0.1458rem;
            width: 4.2396rem;
            height: 0.625rem;
            background: #eef6fe;
            margin-bottom: 0.1042rem;
            h4 {
              font-weight: 500;
              font-size: 0.1042rem;
              color: #181818;
              margin-bottom: 0.0156rem;
            }
            p {
              font-weight: 300;
              font-size: 0.0833rem;
              color: #181818;
              line-height: 0.125rem;
            }
          }
        }
      }
      .list {
        // display: flex;
        // justify-content: space-between;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.1563rem;
        width: 100%;
        // height: 376px;
        .list_data {
          // height: 376px;
          // border-radius: 8px;
          background-color: #fff;
          padding: 0.1563rem 0.1042rem;
          .list_title {
            font-size: 0.1042rem;
            color: #000000;
            font-weight: 600;
            margin-bottom: 0.1042rem;
            border-left: 0.026rem solid #2273c8;
            padding-left: 0.0417rem;
          }
          .list_content {
            // height: 1.5625rem;
            background-color: #f0f4ff;
            padding: 0.1563rem 0.1042rem;
            .contentTop {
              display: flex;
              align-items: center;
              width: 100%;
              .item1 {
                display: flex;
                align-items: center;
                width: 100%;
                padding: 0 0.0781rem;
                img {
                  width: 0.1302rem;
                  height: 0.1302rem;
                  margin-right: 0.026rem;
                }
                p {
                  white-space: nowrap;
                  font-size: 0.0833rem;
                }
              }
            }
            .contentButtom {
              height: 0.7292rem;
              background-color: #fff;
              margin-top: 0.1042rem;
              padding: 0.1042rem;
              box-shadow: 0.0521rem 0.0521rem 0.0521rem 0#c9dcf5;
              .modeltitle {
                font-size: 0.0781rem;
                color: #000000;
                font-weight: 600;
                margin-bottom: 0.0521rem;
              }
              .infomodel {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 0.0521rem;
                margin-left: 0.1042rem;
                .model-item {
                  display: flex;
                  align-items: center;
                  // justify-content: center;
                  img {
                    width: 0.1563rem;
                    height: 0.1563rem;
                    margin-right: 0.026rem;
                  }
                  p {
                    font-size: 0.0729rem;
                  }
                }
              }
            }
          }
        }
      }
      // 查询结果
      .result {
        display: flex;
        box-sizing: border-box;
        padding: 0.1927rem 0.4167rem 0.1823rem 0.2813rem;
        margin-top: 0.2604rem;
        width: 6.25rem;
        height: 0.7552rem;
        background: #ffffff;
        box-shadow: 0px 0.0313rem 0.1042rem 0px rgba(179, 197, 223, 0.26);
      }
      .result_left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        height: 100%;
        .result_left_top {
          display: flex;
          align-items: center;
          h1 {
            font-size: 0.1146rem;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #000000;
          }
          h6 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 0.2083rem;
            height: 0.099rem;
            background: #f06900;
            border-radius: 0.0104rem;
            font-size: 0.0729rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #ffffff;
            margin-left: 0.1146rem;
          }
        }
        .result_left_bottom {
          display: flex;
          align-items: center;
          h4 {
            font-size: 0.0833rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #7a7a7a;
            margin-right: 0.3125rem;
          }
        }
      }
      .result_right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 0.8333rem;
        height: 100%;
        .btn {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 0.8333rem;
          height: 0.1667rem;
          background: #0a7be0;
          border-radius: 0.0208rem;
          font-size: 0.0833rem;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #ffffff;
        }
      }
    }
  }
}
::v-deep .el-input__inner {
  width: 4.1667rem;
  height: 0.2708rem;
  border-radius: 0.0208rem 0 0 0.0208rem;
}
</style>
